<template>
    <div>
        <vue-table :data-source="tableList" :search-config="searchConfig" @on-query="changeQuery">
            <template slot="search" slot-scope="props">
                <i-input v-model="props.items.keyword" placeholder="请输入关键字"></i-input>
            </template>
            <template slot="header">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </template>
            <template slot="tbody" slot-scope="props">
                <tr>
                    <td>{{props.item.id}}</td>
                    <td>{{props.item.name}}</td>
                    <td>{{props.item.username}}</td>
                    <td>{{props.item.email}}</td>
                    <td class="col-xs-3">
                        <Tooltip content="密码重置" placement="top">
                            <i-button type="text" v-on:click="resetPassword(props.item.id, props.item.name)"
                                      :disabled="stateManager.buttonLoading">
                                <Icon type="key" size="16"></Icon>
                            </i-button>
                        </Tooltip>
                        <Tooltip content="编辑" placement="top">
                            <i-button type="text" v-on:click="showEditDialog(props.item.id)"
                                      :disabled="stateManager.buttonLoading">
                                <Icon type="edit" size="16"></Icon>
                            </i-button>
                        </Tooltip>
                        <Tooltip content="删除" placement="top">
                            <i-button type="text" v-on:click="deleteModel(props.item.id, props.item.name)"
                                      :disabled="stateManager.buttonLoading">
                                <Icon type="trash-a" size="16"></Icon>
                            </i-button>
                        </Tooltip>
                    </td>
                </tr>
            </template>
        </vue-table>

        <reset-password :resetPasswordManager="resetPasswordManager"></reset-password>
    </div>


</template>


<script>
  import ResetPassword from './reset_password.vue'
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    components: {
      'reset-password': ResetPassword
    },
    data: function () {
      const validatePassword = (rule, value, callback) => {
        console.log(value)
        if (value.length < 6 || value.length > 25) {
          callback(new Error('密码长度应为6-25个字符！'))
        } else {
          callback()
        }
      }
      return {
        resetPasswordManager: {
          dialogVisible: false,
          userId: 0,
          userName: ''
        },
        list: this.$listDataSource({
          url: '/api/admin/admin'
        }),
        ruleValidate: {
          newPassword: [
            {required: true, validator: validatePassword, trigger: 'blur'}
          ]
        },
        searchConfig: {
          items: {
            keyword: ''
          },
          status: true,
          complex: false
        },
        model: this.$modelDataSource({
          url: '/api/admin/manager',
          dataKey: 'model',
          attributes: {
            id: 0
          }
        }),
        query: {},
        newModel: {
          newPassword: ''
        },
      };
    },
    methods: {
      showEditDialog: function (id) {
        this.stateManager.editModelId = id;
        this.stateManager.buttonLoading = true;
      },
      changeQuery: function (query) {
        this.query = query;
        this.stateManager.refreshList = true;
      },
      resetPassword: function (userId, userName) {
        this.resetPasswordManager.userId = userId
        this.resetPasswordManager.userName = userName
        this.resetPasswordManager.dialogVisible = true
      },
      deleteModel: function (modelId, modelName) {
        console.log(modelId);
        let self = this;
        this.$Modal.confirm({
          title: '删除确认',
          content: '确认删除' + modelName + '吗，删除后无法恢复',
          loading: true,
          onOk: function () {
            self.model.reset();
            self.model.uuid = modelId;
            self.model.destroy(function () {
              self.$Modal.remove();
              self.stateManager.refreshList = true;
              self.$Notice.success({
                title: '删除成功',
                desc: modelName + '已删除'
              });
            });
          },
          onCancel: function () {
            console.log('取消删除');
          }
        });
      },
    },
    computed: {
      user(){
        return this.$store.state.user;
      },
      tableList(){
        let self = this;
        if (this.stateManager.refreshList) {
          this.list.fetch(self.query, function () {
            self.stateManager.refreshList = false;
          });
        }
        return this.list;
      }
    }
  }
</script>